// 文章列表
// 1. 请求参数对象配置
var q = {
    pagenum: 1, // 页码 - 默认请求第一页数据
    pagesize: 2, // 每页需要几条数据 - 默认2条
    cate_id: '', // 文章分类ID-不传后台会返回所有
    state: '' // 文章的状态(已发布/草稿)这2个中文的状态(没有数字对应, 直接传中文作为参数) - 不传后台也会返回所有
}
var total = 0; // 保存一共有多少条数据

// 2. 获取数据 - 铺设页面
function load() {
    getArticleAPI(q, res => {
        $(".layui-table tbody").empty();
        var { data: arr } = res.data;

        // total, 保存的是这个条件下有多少条数据
        total = res.data['total'];
        // 铺设分页
        setPage();



        if (arr.length == 0) {
            layer.msg("暂无数据");
            return;
        }
        
        arr.forEach(obj => {
            var theTr = `<tr>
                            <td>${obj.title}</td>
                            <td>${obj.cate_name}</td>
                            <td>${formatDate(obj.pub_date)}</td>
                            <td>${obj.state}</td>
                            <th>
                            <a href="/iframe/article/publisher/publisher.html?id=${obj.Id}" class="layui-btn layui-btn-xs">编辑</a>
                            <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                            </th>
                        </tr>`
            $(".layui-table tbody").append(theTr);
        })


        

    })
}
load();

// 3. 获取文章类型
getCategoryAPI({}, res => {
    var {data: arr} = res.data;
    // 铺设下拉菜单
    // 默认显示个所有分类
    $(".search select[name=category]").append(`<option value="">所有分类</option>`);
    arr.forEach(obj => {
        var theOption = `<option value="${obj['Id']}">${obj['name']}</option>`;
        $(".search select[name=category]").append(theOption);
        // 这里要注意layui的标签, 要让layui重新监测下里面的option才会渲染出来
        layui.form.render();
    })
})

// 4. 监听search表单提交
$(".search").on("submit", function(ev){
    ev.preventDefault();
    // 收集用户选择的信息
    var cateId = $(".search select[name=category]").val();
    var state = $(".search select[name=state]").val();
    // 修改参数q, 然后调用load - 请求新的数据 - 刷新页面
    q['cate_id'] = cateId;
    q['state'] = state;
    
    // 回到第一页
    q['pagenum'] = 1;
    load();
})

// 5. 渲染分页的方法
function setPage(){
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
      elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize, // 每页显示几条
      curr: q.pagenum, // 当前第几页高亮
      // (1): 只要laypage.render()被调用,  默认第一个得点击下, 所以jump就被触发了
      // (2): 方式2触发jump, 就是用户点击了页码, 直接触发jump函数执行
      // 防止死循环: first的值为true, 证明是方式1触发的, 那我们就不能去load() -> setPage -> laypage.render()了
      jump: function(obj, first){ 
          if (!first) {
            q.pagenum = obj.curr; // 用户点击的第几页
            q.pagesize = obj.limit; // 点击的一页要多少条
            load();
          }
      },
      // 自定义分页器 - 增加额外的东西
      layout: ["count", "limit", "prev", "page", "next", "skip"],
      // 下拉菜单里显示的数据
      limits: [2, 3, 5, 10, 20, 50]
    });
}

// 6. 监听删除按钮点击
$(".layui-table tbody").on("click", ".del", function(ev){
    layer.confirm("确定退出?", { icon: 3, title: "提示" }, () => {
        delArticleAPI({id: $(ev.target).attr("myid")}, () => {
            q.pagenum = 1; // 回到第一页刷新
            load();
        })
    });
})


